<template>
	<view class="contentm">
	    <view class="contentm1"></view>
	    <view class="contentm-t">我要卖车</view>
	    <view class="contentm-info">提交信息，快速获取评估价</view>
	    <view class="contentm-bot">
	    <input type="text" placeholder="请输入手机号"/>
	    <button>立即估值</button>
	  </view>
	  </view>
	<view class="contentqg">
	  <image class="image1" src="" mode=""/>
	  <text class="qg-t">全国代购</text>
	  <text class="hz"></text>
	  <image class="image2" src="" mode=""/>
	  <text class="qg-t">到店估值</text>
	</view>
	
	<!-- 便捷选车 -->
	  <view class="contentbj">
	    <view class="contentbj1">   </view>
	    <view class="contentbj-t">便捷选车</view>
	    <view class="contentbj-cl">
	      <view class="contentbj-cl1" v-for="item,index in bjArray1" :key="item.sortValue
">
	        <image :src="item.logo" alt=""/>
	        <view class="contentbj-title">{{item.label}}</view>
	      </view>
	    </view>
	    <view class="contentbj-bt">
	        <view class="contentbj-bt1" v-for="item,index in bjArray3" :key="item.sortValue
	        ">
	        	        <view class="contentbj-title">{{item.label}}</view>
	        	      </view>
			<view class="contentbj-bt1" v-for="item,index in bjArray2" :key="item.sortValue
			">
				        <view class="contentbj-title">{{item.label}}</view>
				      </view>
	        
	      </view>
	  </view>
	  <!-- 二手车 -->
	  <view class="contentxc">
	    <view class="contentxc-hd" style="position: relative;">
	      <view class="contentxc-hd1"> </view>
	      <view class="contentxc-title">二手车</view>
	      <view class="contentxc-gd">查看更多</view>
	      <view class="contentxc-gd1">></view>
	    </view>
	    <view class="esc" style="margin: 1vh 3vw;display: flex;flex-wrap: wrap;">
	    	<view class="xc-esc" style="width: 45vw;margin-right: 2vw;" v-for="item,index in  esArray" :key="item.dateOfRegistration
">
	    		<image :src="item.cover" mode="" style="width: 45vw;height: 20vh;"></image>
				<view >
					<view style="max-height: 6vh;overflow: hidden;text-overflow: ellipsis;">
						<text class="saleType" v-if="item.saleType == 0">腾讯自营</text>
						<view class="saleType" style="background-color: skyblue;" v-if="item.saleType == 1">车主自营</view>
						<view class="saleType" style="background-color: red;" v-if="item.saleType == 2">限时特惠</view>
						<text style="font-size: 16px;">{{item.carName}}</text>
					</view>
					<view style="color:gray;font-size: 20rpx;">{{time(item.dateOfRegistration)}}/{{item.mileage}}万公里</view>
					<view style="color: red;font-size: 30rpx;">{{item.currentPrice}}万</view>
				</view>
	    	</view>
	    </view>
	  </view>
	  
	  <!-- 新车 -->
	  <view class="contentxc">
	    <view class="contentxc-hd" style="position: relative;">
	      <view class="contentxc-hd1"> </view>
	      <view class="contentxc-title">新车</view>
	      <view class="contentxc-gd">查看更多</view>
	      <view class="contentxc-gd1">></view>
	    </view>
		<view v-for="item,index in newArray" :key="index">
			<view class="content-2">
				{{item.carBrandMarker}}
			</view>
			<view style="display: flex;" >
			  <view class="content-3">{{item.type}}</view>
			  <text>{{item.colorLabel}}</text>
			</view>
			<view class="content-4">
			  <view class="content-5">{{item.currentPrice}}万</view>
			  <view class="content-6">指导价：-万/优惠-元 </view>
			</view>
		</view>
	   
	  </view>
	  
	  <!-- 新闻资讯 -->
	  <view class="contentxc">
	    <view class="contentxc-hd" style="position: relative;">
	      <view class="contentxc-hd1"> </view>
	      <view class="contentxc-title">新闻资讯</view>
	      <view class="contentxc-gd">查看更多</view>
	      <view class="contentxc-gd1">></view>
	    </view>
	  	<view class="esc" style="margin: 1vh 3vw;display: flex;flex-wrap: wrap;">
	  		    	<view class="xc-esc" style="width: 45vw;margin-right: 2vw;" v-for="item,index in  newsArray" :key="item.id">
	  		    		<image :src="item.cover" mode="" style="width: 45vw;height: 20vh;"></image>
	  					<view style="height: 6vh">{{item.title}}</view>
						<view style="color: gray;height: 3vh;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{item.simple}}</view>
						<view style="color: gray;">阅读：{{item.readingVolume}}</view>
	  		    	</view>
	  		    </view>
	   
	  </view>
	  <!-- 底部 -->
	  <view class="footer">
	    <view style="text-align: center;color: gray;font-size: 25rpx;">Copyright © 2019 腾发 All Rights Reserved 版权所有</view>
	    <view style="text-align: center;color: gray;font-size: 25rpx;">豫ICP备14025595号</view>
	  </view>
	 

</template>

<script setup>
	import {ref,reactive} from 'vue'
	import { onLoad,onReady } from '@dcloudio/uni-app'
	import { getCb,getScen,getNewc,getNews } from '../../utils/ajax'
	const bjArray1 = reactive([])
	const bjArray2 = reactive([])
	const bjArray3 = reactive([])
	const esArray = reactive([])
	const newArray = reactive([])
	const newsArray = reactive([])
	onLoad(()=>{
		getCb().then(res=>{
			console.log(res.data.data)
			bjArray1.push(...res.data.data.convenientBrands)
			bjArray2.push(...res.data.data.convenientModels)
			bjArray3.push(...res.data.data.convenientPrices)
			console.log(bjArray1)
		})
		getScen().then(res=>{
			esArray.push(...res.data.data.content)
		})
		getNewc().then(res=>{
			
			newArray.push(...res.data.data.content)
			console.log(newArray)
		})
		getNews().then(res=>{
			console.log(res.data)
			newsArray.push(...res.data.data.slice(0,4))
			console.log(newsArray)
		})
	})
	function time(x){
		var data = new Date(x)
		var year = data.getFullYear()
		var month = data.getMonth()
		return year+'月'+month+1 + '月'
	}
	function long(x){
		return x/1000
	}
</script>

<style>
	
	/* 二手车 */
	.saleType{
		width: 22vw;
		text-align: center;
		hieght:2vh;
		background-color: orange;
		border-radius: 5px;
		color: white;
		font-size: 15px;
		margin-left: 1vw;
	}
/* 卖车 */
	.contentm {
	  position: relative;
	    width: 100%;
	    height: 41.06667vw;
	    background: url(https://m.tf2sc.cn/assets/img/home_guche.6eb9a788.png) no-repeat 50%;
	    background-size: cover;
	}
	.contentm1{
	  display: inline-block;
	    margin-top: 5.6vw;
	    margin-right: 2.66667vw;
	    width: 1.33333vw;
	    height: 4vw;
	    background: #5685fe;
	}
	.contentm-t{
	  position: absolute;
	    top: 5.33333vw;
	    left: 4vw;
	    height: 4.26667vw;
	    font-size: 3.2vw;
	    font-family: PingFangSC-Semibold,PingFang SC;
	    font-weight: 600;
	    color: #222;
	    line-height: 4.26667vw;
	}
	.contentm-info{
	  margin: 2.53333vw 0 8.13333vw 4vw;
	    height: 4.4vw;
	    font-size: 3.2vw;
	    font-family: PingFangSC-Regular,PingFang SC;
	    font-weight: 400;
	    color: #5685fe;
	    line-height: 4.4vw;
	}
	.contentm-bot{
	  display: flex;
	}
	.contentm input{
	  margin-left: 4vw;
	    padding-left: 5.33333vw;
	    width: 61.33333vw;
	    height: 10.13333vw;
	    background: #fff;
	    border-radius: 2.13333vw 0 0 2.13333vw;
	    border: 1px solid #f0f0f0;
	    border-right: none;
	}
	.contentm button{
	  width: 28.6vw;
	  height: 10.8vw;
	  background: #5685fe;
	  border-radius: 0 2.13333vw 2.13333vw 0;
	  border: .26667vw solid #f0f0f0;
	  font-size: 3vw;
	  font-family: PingFangSC-Regular,PingFang SC;
	  font-weight: 400;
	  color: #fff;
	  line-height: 5.33333vw;
	}
	
	
	/* 代购 */
	.contentqg{
	  position: relative;
	    margin: 4vw auto;
	    width: 92vw;
	    height: 15.73333vw;
	    background: #fff;
	    -webkit-box-shadow: 0 0.26667vw 2.66667vw 0 rgba(170,170,216,.4);
	    box-shadow: 0 0.26667vw 2.66667vw 0 rgba(170,170,216,.4);
	    border-radius: 1.86667vw;
	}
	.contentqg .image1{
	  margin: 5.2vw 1.33333vw 0 12.93333vw;
	    width: 5.33333vw;
	    height: 5.33333vw;
	}
	.contentqg .qg-t{
	  display: inline-block;
	    height: 5.33333vw;
	    font-size: 3.73333vw;
	    font-family: PingFangSC-Regular,PingFang SC;
	    font-weight: 400;
	    color: #333;
	    line-height: 5.33333vw;
	    vertical-align: super;
	}
	.contentqg .hz{
	  position: absolute;
	    top: 3.86667vw;
	    margin: 0 11.46667vw 0 11.6vw;
	    width: 1px;
	    height: 8vw;
	    background: #d8e3ff;
	}
	.contentqg .image2{
	  margin: 5.2vw 1.33333vw 0 12.93333vw;
	  width: 5.33333vw;
	  height: 5.33333vw;
	}
	
	/* 便捷选车 */
	.contentbj{
	  position: relative;
	  margin-bottom: 2.66667vw;
	  width: 98.66667vw;
	  height: 65.6vw;
	  border: 1px solid #fff;
	}
	.contentbj1{
	  margin-top: 4vw;
	    margin-bottom: 5.33333vw;
	    width: 1.33333vw;
	    height: 4vw;
	    background: #5685fe;
	} 
	.contentbj-t{
	  position: absolute;
	    top: 2.66667vw;
	    left: 4vw;
	    height: 6.66667vw;
	    font-size: 4.8vw;
	    font-family: PingFangSC-Semibold,PingFang SC;
	    font-weight: 600;
	    color: #333;
	    line-height: 6.66667vw;
	} 
	.contentbj-cl{
	  display: flex;
	  width: 100%;
	  height: 26vw;
	  overflow-x: auto;
	}
	.contentbj-cl1{
	  margin-left: 2.66667vw;
	  margin-right: 2.93333vw;
	  width: 20vw;
	  height: 24.93333vw;
	}
	.contentbj-cl image{
	  width: 100%;
	    height: 17.86667vw;
	}
	.contentbj-title{
	  margin-top: 2.4vw;
	    margin-left: 4vw;
	    height: 4.4vw;
	    font-size: 3.2vw;
	    font-family: PingFangSC-Regular,PingFang SC;
	    font-weight: 400;
	    color: #333;
	    line-height: 4.4vw;
	}
	.contentbj-bt{
	  display: flex;
	  width: 100vw;
	    flex-wrap: wrap;
	    justify-content: space-between;
	    width: 92vw;
	    margin: 0 auto;
	}
	.contentbj-bt1{
	  margin-top: 4vw;
	    font-size: 3.2vw;
	    font-family: PingFangSC-Regular,PingFang SC;
	    font-weight: 400;
	    color: #333;
	    line-height: 9.06667vw;
	    width: 20.93333vw;
	    height: 8vw;
	    background-color: #f5f7fe;
	    border-radius: 4vw;
	    text-align: center;
	}
	
	/* 新车 */
	.contentxc-hd1{
	  margin-top: 4vw;
	    margin-bottom: 5.33333vw;
	    width: 1.33333vw;
	    height: 4vw;
	    background: #5685fe;
	}
	.contentxc-title{
	  position: absolute;
	    top: -1.06667vw;
	    left: 4vw;
	    height: 6.66667vw;
	    font-size: 4.8vw;
	    font-family: PingFangSC-Semibold,PingFang SC;
	    font-weight: 600;
	    color: #333;
	    line-height: 6.66667vw;
	}
	.contentxc-gd{
	  position: absolute;
	    right: 9.46667vw;
	    height: 4.4vw;
	    font-size: 3.2vw;
	    font-family: PingFangSC-Regular,PingFang SC;
	    font-weight: 400;
	    color: #666;
	    line-height: 4.4vw;
	    top: 0vw;
	}
	.contentxc-gd1{
	  font-family: iconfont!important;
	    font-size: 4.13333vw;
	    font-style: normal;
	    position: absolute;
	    right: 5.46667vw;
	    top:-0.8vw;
	}
	.content-2{
	  margin-bottom: 1.33333vw;
	  font-size: 4vw;
	  font-family: PingFangSC-Semibold,PingFang SC;
	  font-weight: 600;
	  color: #333;
	  line-height: 5.6vw;
	}
	.content-3{
	  padding-left: 1.33333vw;
	    padding-right: 1.33333vw;
	    border-radius: .53333vw;
	    font-size: 2.93333vw;
	    text-align: center;
	    line-height: 4vw;
	    margin-right: 4vw;
	    background: linear-gradient(90deg,#5f98f6,#2e68eb);
	    color: #fff;
	}
	.content-4{
	  margin-bottom: 4vw;
	  padding-bottom: 4vw;
	  border-bottom: 1px solid #f0f0f0;
	}
	.content-5{
	  display: inline-block;
	  margin-top: 4vw;
	  margin-right: 4vw;
	  height: 4vw;
	  font-size: 4vw;
	  font-family: PingFangSC-Semibold,PingFang SC;
	  font-weight: 600;
	  color: #ff5a54;
	  line-height: 4vw;
	}
	.content-6{
	  display: inline-block;
	  height: 4vw;
	  font-size: 3.2vw;
	  font-family: PingFangSC-Regular,PingFang SC;
	  font-weight: 400;
	  color: #666;
	  line-height: 4vw;
	}
	
	
	
	.footer {
	  height: 100rpx;
	  margin-top: 5vh;
	}
	
</style>
